<template>
  <div class="carousel">
    <fx-card title="基础用法">
      <fx-carousel width="530" height="300">
        <fx-carousel-item v-for="item in picList" :key="item.name">
          <img :src="item.src" :alt="item.name" class="pic">
        </fx-carousel-item>
      </fx-carousel>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="控制器">
      <fx-row class="mb10">
        <fx-col :span="8">
          控制器显示方式
          <fx-radio-group v-model="arrowCheck">
            <fx-radio-button label="never">never</fx-radio-button>
            <fx-radio-button label="always">always</fx-radio-button>
            <fx-radio-button label="hover">hover</fx-radio-button>
          </fx-radio-group>
        </fx-col>
        <fx-col :span="8">
          控制器显示位置
          <fx-radio-group v-model="position">
            <fx-radio-button label="left">left</fx-radio-button>
            <fx-radio-button label="right">right</fx-radio-button>
            <fx-radio-button label="top">top</fx-radio-button>
            <fx-radio-button label="bottom">bottom</fx-radio-button>
          </fx-radio-group>
        </fx-col>
      </fx-row>
      <fx-carousel height="400" :arrow="arrowCheck" :indicator-position="position" class="mb20">
        <fx-carousel-item v-for="item in picList" :key="item.name">
          <img :src="item.src" alt="路飞" class="pic">
        </fx-carousel-item>
      </fx-carousel>
      <template #hide>
        <pre v-highlight="arrow"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义控制">
      <fx-carousel height="400" arrow="hover" class="mb20" :auto-play="autoPlay" :interval="interval">
        <fx-carousel-item v-for="item in picList" :key="item.name">
          <img :src="item.src" alt="路飞" class="pic">
        </fx-carousel-item>
      </fx-carousel>
      <fx-button @click="autoPlay=!autoPlay" class="mr10">{{ autoPlay ? '关闭自动播放' : '开启自动播放' }}</fx-button>
      <fx-input-number v-model="interval" :min="300"></fx-input-number>
      <template #hide>
        <pre v-highlight="auto"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from 'vue'

export default defineComponent({
  name: 'viewCarousel',
  setup() {
    const index = ref<number>(0)
    const arrowCheck = ref<string>('always')
    const position = ref<string>('bottom')
    const autoPlay = ref<boolean>(true)
    const interval = ref<number>(1000)
    const picList = reactive([
      {
        src: new URL('../../assets/1.jpg', import.meta.url).href,
        name: '路飞'
      },
      {
        src: new URL('../../assets/2.jpg', import.meta.url).href,
        name: '索隆'
      },
      {
        src: new URL('../../assets/3.jpg', import.meta.url).href,
        name: '娜美'
      },
      {
        src: new URL('../../assets/4.jpg', import.meta.url).href,
        name: '乌索普'
      },
      {
        src: new URL('../../assets/5.jpg', import.meta.url).href,
        name: '山治'
      },
      {
        src: new URL('../../assets/6.jpg', import.meta.url).href,
        name: '乔巴'
      },
      {
        src: new URL('../../assets/7.jpg', import.meta.url).href,
        name: '罗宾'
      },
      {
        src: new URL('../../assets/8.jpg', import.meta.url).href,
        name: '佛兰奇'
      },
      {
        src: new URL('../../assets/9.jpg', import.meta.url).href,
        name: '布鲁克'
      },
      {
        src: new URL('../../assets/10.jpg', import.meta.url).href,
        name: '甚平'
      }
    ])

    const base = `<fx-carousel height="300">
  <fx-carousel-item v-for="item in picList" :key="item.name">
    <img :src="item.src" :alt="item.name" class="pic">
  </fx-carousel-item>
</fx-carousel>`

    const arrow = `<fx-row class="mb10">
  <fx-col :span="8">
    控制器显示方式
    <fx-radio-group v-model="arrowCheck">
      <fx-radio-button label="never">never</fx-radio-button>
      <fx-radio-button label="always">always</fx-radio-button>
      <fx-radio-button label="hover">hover</fx-radio-button>
    </fx-radio-group>
  </fx-col>
  <fx-col :span="8">
    控制器显示位置
    <fx-radio-group v-model="position">
      <fx-radio-button label="left">left</fx-radio-button>
      <fx-radio-button label="right">right</fx-radio-button>
      <fx-radio-button label="top">top</fx-radio-button>
      <fx-radio-button label="bottom">bottom</fx-radio-button>
    </fx-radio-group>
  </fx-col>
</fx-row>
<fx-carousel height="300" :arrow="arrowCheck" class="mb20">
  <fx-carousel-item v-for="item in picList" :key="item.name">
    <img :src="item.src" alt="路飞" class="pic">
  </fx-carousel-item>
</fx-carousel>`

    const auto = `<fx-carousel height="300" arrow="hover" class="mb20" :auto-play="autoPlay" :interval="interval">
  <fx-carousel-item v-for="item in picList" :key="item.name">
    <img :src="item.src" alt="路飞" class="pic">
  </fx-carousel-item>
</fx-carousel>
<fx-button @click="autoPlay=!autoPlay" class="mr10">{{ autoPlay ? '关闭自动播放' : '开启自动播放' }}</fx-button>
<fx-input-number v-model="interval" :min="300"></fx-input-number>`

    return {
      index,
      arrowCheck,
      position,
      autoPlay,
      interval,
      picList,
      base,
      arrow,
      auto
    }
  }
})
</script>

<style scoped lang="scss">
.carousel {
  .pic {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  span {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #fff;
  }
}
</style>
